<template>
  <el-dialog
    draggable
    v-model="tableParent.shiGuGaoFaLuDuanShow"
    width="50%"
    :with-header="false"
    :modal="false"
    :z-index="2001"
    :append-to-body="true"
    center
  >
    <div class="baogao">
      <div class="color-white">{{ tableParent.shiGuGaoFaLuDuanName }}</div>
      <el-table :data="paginatedTableData" max-height="600" style="width: 100%">
        <el-table-column prop="sgbh" label="事故编号" width="200" />
        <el-table-column prop="xzqh" label="行政区划" />
        <el-table-column prop="sgfssj" label="事故发生时间" width="200" />
        <!-- <el-table-column prop="lh" label="路号" /> -->
        <!-- <el-table-column prop="lm" label="路名" width="120" /> -->
        <!-- <el-table-column prop="gls" label="公里数" /> -->
        <!-- <el-table-column prop="ms" label="米数" /> -->
        <!-- <el-table-column prop="sgdd" label="事故地点" /> -->
        <el-table-column
          prop="sgrdyy"
          label="事故认定原因"
          width="300"
          show-overflow-tooltip
        />
        <el-table-column prop="swrs" label="死亡人数" />
        <el-table-column prop="ssrs" label="受伤人数" />
        <el-table-column prop="zjccss" label="直接财产损失" />
        <!-- <el-table-column prop="sglx" label="事故类型" /> -->
      </el-table>
      <div class="spans">
        <el-pagination
          :page-size="pageSize"
          :current-page="currentPage"
          layout="prev, pager, next"
          :total="totalItems"
          @current-change="handlePageChange"
        />
        <span>总页数：{{ totalPages }}</span>
        <span style="">总条数：{{ totalItems }}</span>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { useAccidentTableList } from "@/store";

const tableParent = useAccidentTableList();
const totalItems = computed(() => tableParent.shiGuGaoFaLuDuanList.length);
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));
const pageSize = ref(5);
const currentPage = ref(1);

const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableParent.shiGuGaoFaLuDuanList.slice(start, end);
});
const handlePageChange = (newPage: number) => {
  currentPage.value = newPage;
};
</script>

<style lang="less" scoped>
.baogao {
  display: flex;
  justify-content: center;
  color: white;
  flex-direction: column;
  .cell {
    text-align: center;
  }
}
::v-deep .el-pagination button:disabled,
::v-deep .el-pagination .btn-prev,
::v-deep .el-pagination > .is-last {
  background: transparent;
}
::v-deep .el-pager li {
  background: transparent;
  color: white;
}
::v-deep .el-pager li.is-active {
  color: #429EA5;
}
.el-table__inner-wrapper {
  text-align: center;
}
::v-deep .cell {
  text-align: center;
}
.spans {
  display: flex;
  align-items: center;
  gap: 20px;
  color: white;
}
</style>
